<template>
    <div id="game-recharge" class="bg-account">
        <div class="con-wrap game-recharge-info">
            <div class="flex-nowrap">
                <p>游戏币数量</p>
                <p class="color-main">{{ rechargeInfo.coin }}</p>
            </div>
            <div class="flex-nowrap">
                <p>支付金额</p>
                <p class="color-red"><span>￥</span>{{ rechargeInfo.money }}</p>
            </div>
        </div>
        <p class="con-wrap pay-select">付款方式</p>
        <van-radio-group v-model="rechargeInfo.type" class="mt10">
            <van-cell-group inset>
                <van-cell title="微信" clickable @click="rechargeInfo.type = 1">
                    <template #icon="props">
                        <img class="img-pay" src="/statics/home/images/pay-wx.png" />
                    </template>
                    <template #right-icon>
                        <van-radio :name="1" />
                    </template>
                </van-cell>
            </van-cell-group>
            <van-cell-group inset class="mt20">
                <van-cell title="支付宝" clickable @click="rechargeInfo.type = 2">
                    <template #icon="props">
                        <img class="img-pay" src="/statics/home/images/pay-alipay.png" />
                    </template>
                    <template #right-icon>
                        <van-radio :name="2" />
                    </template>
                </van-cell>
            </van-cell-group>
            <van-cell-group inset class="mt20">
                <van-cell title="代币" clickable @click="rechargeInfo.type = 3">
                    <template #value>
                        <p class="pay-coin">余额 <span class="color-main">{{ userInfo.money }}</span></p>
                    </template>
                    <template #icon="props">
                        <img class="img-pay" src="/statics/home/images/user-coin.png" />
                    </template>
                    <template #right-icon>
                        <van-radio :name="3" />
                    </template>
                </van-cell>
            </van-cell-group>
        </van-radio-group>
        <div class="fixed-bottom">
            <div class="btn-1 btn-1-main" @click="toSubmit()">充值</div>
        </div>
    </div>
</template>


<script>
export default {
    name: 'GameRecharge',
    data() {
        return {
            rechargeInfo: {
                coin: 0,
                money: 0,
                type: 3,
            },
            userInfo:{
                money:0
            },
        }
    },
    created() {
        // 这里可能需要从本地获取，直接从url获取不安全
        this.rechargeInfo.coin = this.$route.params.coin != undefined ? this.$route.params.coin : 0;
        this.rechargeInfo.money = this.$route.params.money != undefined ? this.$route.params.money : 0;
        this.$api.user.info({}).then(res => {
            this.userInfo = res.result
        }).finally(e => {});
    },
    methods: {
        toSubmit(){
            console.log(this.rechargeInfo)
            this.$api.buycoin.create(this.rechargeInfo).then(res => {
                this.$router.push('/game/recharge/success/' + res.result.detail.id);
            }).finally(e => {});
        },
    }
}
</script>
